<template>
  <div>
    <div class="main">
      <div class="video" v-for="(item,index) in dataList" :key="index" @click="goToVideo(item)">
        <img class='img' :src="item.cover" alt="" width="100%" height="96px" />
        <p class="video-title" v-html="item.name">奇葩说(2018年4月9日)</p>
        <div class="sele" v-show="options">
          <img src="../../../../../static/shujia/xunzhong.png" alt="" width="25px" height="25px" v-if="item.active" />
          <img src="../../../../../static/shujia/null.png" alt="" width="25px" height="25px" v-else />
        </div>
      </div>
      <div class="delbook" @click="delbookinfo" v-show="options">
        <!--<img src="../../../../../static/discover/delbook.png" width="44px" height="40" />-->
        删除收藏
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, MessageBox } from "mint-ui";
import baseurl from "../../../../api/baseurl.js";
export default {
  props: ["options"],
  data() {
    return {
      dataList: [],
      pageIndex: 1
    };
  },
  created() {
    this.userid = localStorage.getItem("userid");
    this.getinfo();
  },
  methods: {
    delopt(item) {
      if (this.options) {
        item.active = !item.active;
      }
    },
    goToVideo(item) {
      if (this.options) {
        this.delopt(item);
      } else {
        this.$router.push({
          name: "videocontent",
          params: {
            videodata: item
          }
        });
      }
    },
    delbookinfo() {
      const delbookid = [];
      for (let item of this.dataList) {
        if (item.active == true) {
          delbookid.push(item.id);
        }
      }
      const delid = delbookid.join(",");
      if (delid.length == 0) {
        Toast("请选择删除项");
        return;
      }
      MessageBox.confirm("", "确认删除收藏嘛？")
        .then(action => {
          this.$http({
            method: "post",
            url: baseurl.urls + "/collection/deleteCollection",
            params: {
              id: delid
            }
          })
            .then(response => {
              if (response.status == 200) {
                this.getinfo();
                Toast("删除收藏成功");
              }
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(error => {
          console.log(error);
        });
    },
    back() {
      this.$router.back(-1);
    },
    getinfo() {
      this.$http({
        method: "post",
        url: baseurl.urls + "collection/selectCollection",
        params: {
          //收藏类型 例如：1 图书 2悦读 3 视听 4 报纸 5 期刊 ...
          userid: this.userid,
          pageNo: this.pageIndex,
          columntype: 3,
          pageSize: 30
        }
      })
        .then(response => {
          if (response.status == 200) {
            const dataList = response.data.date.list;
            dataList.map(book => (book.active = false));
            this.dataList = dataList;
          }
          console.log(this.dataList);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 95%;
  margin: 0 auto;
}
.main::after {
  content: "";
  width: 100px;
}
.video {
  width: 30%;
  margin-bottom: 10px;
  border-radius: 10px;
  position: relative;
  /*box-shadow: darkgrey 1px 1px 1px;*/
}
.video .img {
  /*margin: 10px 0;*/
  /* margin-left: 10px; */
}
.video .video-box {
  /*margin-left: 20px;*/
  padding-left: 20px;
}
.video .video-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
}
.video .video-subtitle {
  font: 13px/20px "microsoft yahei";
  /*font-size: 13px;*/
  color: #868686;
  overflow: hidden;
  /*text-overflow: ellipsis;*/
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  margin-bottom: 12px;
}
.video .video-icon {
  margin-bottom: 12px;
}
.video .video-icon .category {
  font-size: 12px;
  color: #e60012;
  border: 1px solid #e60012;
  text-align: center;
  line-height: 12px;
  padding: 0px 10px;
  border-radius: 5px;
  /*padding-top: 1px;*/
}
.video .video-icon .button {
  margin-left: 20px;
  font-size: 14px;
}
.video .video-icon .button span {
  margin-left: 4px;
  color: #a1a1a1;
}

/*音频样式*/
.video .video-box .audio {
  font-size: 12px;
  color: #2699eb;
  border: 1px solid #2699eb;
  text-align: center;
  line-height: 12px;
  padding: 0px 10px;
  border-radius: 5px;
}
/*选择图片*/
.main .sele {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 0;
  top: 0;
}

.main .delbook {
  position: fixed;
  left: 0;
  bottom: 3px;
  background: skyblue;
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 5vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
</style>